const drag =  (el) => {
    const getStyle = (el, style) => {
        let value = parseInt(window.getComputedStyle(el)[style])
        return isNaN(value) ? 0 : value
    }
    const onMouseDown = e => {
        x = e.pageX - left;
        y = e.pageY - topx;
        document.addEventListener('mousemove', onMouseMove, false) 
        document.addEventListener('mouseup', onMouseUp, false)
    }
    const onMouseMove = e => {
        let moveX = e.pageX - x
        let moveY = e.pageY - y 
        el.style.left = moveX + 'px'
        el.style.top = moveY + 'px'   
    }
    const onMouseUp = e => {
        document.removeEventListener('mouseup', onMouseUp, false) 
        document.removeEventListener('mousemove', onMouseMove, false) 
        left = getStyle(el, "left");
        topx = getStyle(el, "top");   
    }    
    var left = getStyle(el, "left");
    var topx = getStyle(el, "top");

    let x = 0;
    let y = 0;
    el.addEventListener('mousedown', onMouseDown, false)
}
drag(document.querySelector('#test'))